<!--
 * @Author: Songjq
 * @Date: 2021-08-17 15:13:51
 * @Desscription:
-->
<template>
  <div class="head-container">
    <el-popover
      placement="bottom"
      trigger="click"
      style="width:260px"
      :disabled="disabled"
    >
      <org-tree
        ref="org-tree"
        class="tree-content"
        :isAutoInit="false"
        :loadRightData="false"
        @treeItemClick="treeItemClick"
      />
      <el-input
        slot="reference"
        v-model="itm[treeName]"
        clearable
        size="small"
        :placeholder="placeholder"
        @focus="init"
        @keyup.enter.native="getNodeSearchInit"
        @clear="clearInputData"
        :disabled="disabled"
        autocomplete="new-password"
      >
      </el-input>
      <!--用于表单验证-->
      <el-input
        v-show="false"
        v-model="deptName"
        size="mini"
      />
    </el-popover>
  </div>
</template>

<script>
import OrgTree from "./OrgTree.vue";
export default {
  components: { OrgTree },
  name: "SelectOrgTree",
  props: {
    placeholder: {
      type: String,
      default: "请输入",
    },
    itm: {
      type: Object,
      default: function () {
        return {};
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    deptName: {
      type: String,
      default: "",
    },
    treeId: {
      type: String,
      default: "value",
    },
    treeName: {
      type: String,
      default: "valueAlias",
    },
  },
  methods: {
    // 初始化树节点
    init() {
      this.deptDatas = [];
      this.defaultExpandedKeys = [];
      this.$refs["org-tree"].init(); // 加载请求树节点的方法
    },

    // 检索
    getNodeSearchInit() {
      const verObj = this.verifyKeyword(this.deptName);
      if (verObj.isNotGo) {
        this.$notify({
          title: verObj.tips,
          type: "warning",
        });
        return;
      }

      if (!this.itm[this.treeName] || this.itm[this.treeName] === "") {
        this.init();
        return;
      }
    },

    // 清空输入内容
    clearInputData() {
      this.deptDatas = [];
      this.$set(this.itm, this.treeName, "");
      this.$set(this.itm, this.treeId, "");
    },

    // 点击树节点
    treeItemClick(node) {
      this.$set(this.itm, this.treeName, node.label);
      this.$set(this.itm, this.treeId, node.id);
      // this.$emit("treeItemClick", node);
    },
  },
};
</script>

<style scoped lang="scss">
.head-container {
  position: relative;
  padding-bottom: 0;
  .el-input {
    background: #f4f5f6;
    border: none;
  }
}
.tree-content {
  height: 260px;
  overflow-y: auto;
  overflow-x: auto;
}
</style>
